import { Component } from 'react';
import Item from './Item';

class List extends Component {
    static defaultProps = {
        list: [
            {
                text: '苹果',
                checked: false,
            },
            {
                text: '草莓',
                checked: false,
            }
        ],
        handleItemChange: () => { },
    };
    constructor(props) {
        super(props);
        this.state = {
            list: this.props.list.map(item => ({
                text: item.text,
                checked: item.checked,
            })),
        };
    }
    onItemChange(item) {
        console.log(item);
        const { list } = this.state;
        this.setState({
            list: list.map(prevEntry => ({
                text: prevEntry.text,
                checked: prevEntry.text === item.text ?
                    !prevEntry.checked : prevEntry.checked,
            })),
        });
        this.props.handleItemChange(item)
    }
    render() {
        return (
            <div>
                <ul>
                    {this.state.list.map((item, index) => (
                        <Item
                            key={`list-${index}`}
                            value={item.text}
                            checked={item.checked}
                            onChange={this.onItemChange.bind(this, item)}
                        />
                    ))}
                </ul>
            </div>
        );
    }
}

// 导出组件
export default List;